{%extends 'layout.html'%}
{%block main%}
<ol class="breadcrumb">
    <li><a href="#">管理首页</a></li>
    <li> <span>内容添加</span> </li>
</ol>
<h3>内容添加</h3>

<form role="form" method="post">
    <div class="form-group">
        <label for="title">分类:</label>
        <select name="category" id="category" class="form-control">
            {%for category in categorys%}
            <option value="{{category.id}}">{{category.name}}</option>
            {%endfor%}
        </select>
    </div>
    <div class="form-group">
        <label for="name">内容标题</label>
        <input type="text" class="form-control" id="title" placeholder="请输入分类标题" name="title">
    </div>
    <div class="form-group">
        <label for="description">简介</label>
        <textarea name="description" class="form-control" id="description" cols="30" rows="10">请输入内容简介</textarea>
        <!-- <input type="text" class="form-control" id="description" style="width:500px;height:300px" placeholder="请输入内容简介" name="description"> -->
    </div>
    <div class="form-group ">
        <label for="text-input">内容：</label>
        <textarea class="form-control" oninput='this.editor.update()' id="text-input" rows="10"
            placeholder="请输入内容" name="text-input"></textarea>
    </div>
    <div id="after_marked">
        <label for="preview">marked：</label>
        <textarea class="form-control" name="content" id="preview" rows="10"　id="content"></textarea>
    </div>


    <!-- <div class="form-group">
            <label for="content">内容</label><textarea name="content" id="content" cols="30" rows="10" class="form-control">{请输入内容</textarea>
            <!-- <input type="text" class="form-control" id="content" placeholder="请输入内容" name="content" style="width:111px;height:111px"> -->
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    function Editor(input, preview) {
        this.update = function () {
            preview.innerHTML = marked(input.value);
        };
        input.editor = this;
        // this.update();
    }
    var $$ = function (id) { return document.getElementById(id); };
    // console.log(document.getElementById('text-input'));
    new Editor($$("text-input"), $$("preview")).update();
</script>

{%endblock%}